<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-row v-for="(val, valueIndex) in values" :key="valueIndex" style="margin-bottom:5px">
      <a-col :span="18">
        <a-input v-model="values[valueIndex]" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-cha-xun-zhi')"/>
      </a-col>
      <a-col :span="6">
        <a-button shape="circle" icon="delete"
                  @click="handleDeleteValue(valueIndex)" style="margin-left:5px"/>
        <a-button v-if="(valueIndex + 1) == values.length" shape="circle" icon="plus"
                  @click="handleAddValue" style="margin-left: 5px;"/>
      </a-col>
    </a-row>
    <a-row v-if="0 == values.length">
      <a-col :span="24">
        <a-button shape="circle" icon="plus" @click="handleAddValue"/>
      </a-col>
    </a-row>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

  export default {
    name: 'FilterConfig',
    data () {
      return {
        title: this.$t('m.eform.formDesign.label.cha-xun-zhi'),
        visible: false,
        values: []
      }
    },
    methods: {
      open (values) {
        this.values = values ? JSON.parse(JSON.stringify(values)) : []
        if (this.values.length == 0) {
          this.handleAddValue()
        }
        this.visible = true
      },
      handleOk () {
        this.checkValues()
        this.$emit('selectFinished', this.values)
        this.visible = false
      },
      handleCancel () {
        this.visible = false
      },
      handleDeleteValue (valueIndex) {
        this.values.splice(valueIndex, 1)
      },
      handleAddValue () {
        this.values.push('')
      },
      checkValues () {
        this.values = this.values.filter(vo => !!vo)
      }
    }
  }
</script>
